<template>
	<view class="container">
		<!-- 状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @click="goBack">
				<image src="/static/icons/back.png" mode="aspectFit" class="back-icon"></image>
			</view>
			<view class="nav-title">充值</view>
		</view>
		
		<!-- 充值表单 -->
		<view class="recharge-form">
			<view class="balance-info">
				<text class="label">当前余额</text>
				<text class="amount">¥ {{userBalance}}</text>
			</view>
			
			<view class="amount-section">
				<text class="section-title">充值金额</text>
				<view class="amount-grid">
					<view 
						v-for="(value, index) in rechargeAmounts"
						:key="index"
						:class="['amount-item', selectedAmount === value ? 'active' : '']"
						@click="selectAmount(value)"
					>
						<text class="value">¥{{value}}</text>
						<text class="bonus" v-if="value >= 50">送{{Math.floor(value/50)*5}}元</text>
					</view>
				</view>
			</view>
			
			<view class="payment-section">
				<text class="section-title">支付方式</text>
				<view class="payment-list">
					<view 
						v-for="(method, index) in paymentMethods"
						:key="index"
						:class="['payment-item', selectedPayment === method.id ? 'active' : '']"
						@click="selectPayment(method.id)"
					>
						<image :src="method.icon" mode="aspectFit" class="payment-icon"></image>
						<text class="payment-name">{{method.name}}</text>
						<view class="check-icon" v-if="selectedPayment === method.id">
							<uni-icons type="checkmarkempty" size="20" color="#ff6b6b"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-section">
			<view class="amount-info">
				<text class="label">实付金额</text>
				<text class="value">¥ {{selectedAmount || 0}}</text>
			</view>
			<button class="submit-btn" @click="submitRecharge">确认支付</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			userBalance: 0,
			selectedAmount: null,
			selectedPayment: 'wxpay',
			rechargeAmounts: [10, 20, 50, 100, 200, 500],
			paymentMethods: [
				{
					id: 'wxpay',
					name: '微信支付',
					icon: '/static/payment/wxpay.png'
				},
				{
					id: 'alipay',
					name: '支付宝',
					icon: '/static/payment/alipay.png'
				}
			]
		}
	},
	onLoad() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		this.getUserBalance();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		getUserBalance() {
			// TODO: 调用API获取用户余额
			this.userBalance = 5.20;
		},
		selectAmount(value) {
			this.selectedAmount = value;
		},
		selectPayment(id) {
			this.selectedPayment = id;
		},
		submitRecharge() {
			if (!this.selectedAmount) {
				uni.showToast({
					title: '请选择充值金额',
					icon: 'none'
				});
				return;
			}
			
			uni.showLoading({
				title: '请求支付中'
			});
			
			// TODO: 调用支付API
			setTimeout(() => {
				uni.hideLoading();
				// 模拟支付成功
				uni.showToast({
					title: '充值成功',
					icon: 'success',
					duration: 2000
				});
				
				setTimeout(() => {
					uni.navigateBack();
				}, 2000);
			}, 1500);
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f8f9fa;
}

.status-bar {
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
}

.nav-bar {
	display: flex;
	align-items: center;
	height: 44px;
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
	padding: 0 15px;
}

.nav-left {
	width: 40px;
	height: 100%;
	display: flex;
	align-items: center;
}

.back-icon {
	width: 20px;
	height: 20px;
	filter: brightness(0) invert(1);
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
}

.recharge-form {
	padding: 20px;
}

.balance-info {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
	
	.label {
		font-size: 14px;
		color: #666666;
		margin-bottom: 10px;
		display: block;
	}
	
	.amount {
		font-size: 32px;
		font-weight: bold;
		color: #333333;
	}
}

.section-title {
	font-size: 16px;
	font-weight: 500;
	color: #333333;
	margin-bottom: 15px;
	display: block;
}

.amount-section {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 20px;
}

.amount-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	
	.amount-item {
		height: 80px;
		background-color: #f8f9fa;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 5px;
		transition: all 0.3s ease;
		
		.value {
			font-size: 16px;
			font-weight: 500;
			color: #333333;
		}
		
		.bonus {
			font-size: 12px;
			color: #ff6b6b;
		}
		
		&.active {
			background-color: #fff5f5;
			border: 1px solid #ff6b6b;
			
			.value {
				color: #ff6b6b;
			}
		}
	}
}

.payment-section {
	background-color: #ffffff;
	border-radius: 16px;
	padding: 20px;
}

.payment-list {
	.payment-item {
		display: flex;
		align-items: center;
		padding: 15px 0;
		border-bottom: 1px solid #f1f3f5;
		
		&:last-child {
			border-bottom: none;
		}
		
		.payment-icon {
			width: 24px;
			height: 24px;
			margin-right: 10px;
		}
		
		.payment-name {
			flex: 1;
			font-size: 14px;
			color: #333333;
		}
		
		.check-icon {
			width: 20px;
			height: 20px;
		}
		
		&.active {
			.payment-name {
				color: #ff6b6b;
			}
		}
	}
}

.submit-section {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	padding: 15px 20px;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
	display: flex;
	align-items: center;
	gap: 15px;
}

.amount-info {
	flex: 1;
	
	.label {
		font-size: 12px;
		color: #666666;
	}
	
	.value {
		font-size: 20px;
		font-weight: bold;
		color: #ff6b6b;
	}
}

.submit-btn {
	width: 120px;
	height: 44px;
	line-height: 44px;
	text-align: center;
	background: linear-gradient(135deg, #ff6b6b, #ff8787);
	color: #ffffff;
	border-radius: 22px;
	font-size: 16px;
	
	&:active {
		opacity: 0.9;
	}
}
</style> 